<template>
  <u-button
    :type="type"
    :size="size"
    :plain="plain"
    :loading="loading"
    :disabled="disabled"
    :shape="shape"
    :text="text"
    :color="color"
    :icon="icon"
    @click="handleClick"
  />
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 按钮类型
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'success', 'info', 'warning', 'error', 'default'].includes(value)
  },
  // 按钮大小
  size: {
    type: String,
    default: 'normal',
    validator: (value) => ['mini', 'small', 'normal', 'large'].includes(value)
  },
  // 是否镂空
  plain: {
    type: Boolean,
    default: false
  },
  // 是否加载中
  loading: {
    type: Boolean,
    default: false
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 按钮形状
  shape: {
    type: String,
    default: 'round',
    validator: (value) => ['circle', 'square', 'round'].includes(value)
  },
  // 按钮文字
  text: {
    type: String,
    default: '按钮'
  },
  // 按钮颜色
  color: {
    type: String,
    default: ''
  },
  // 按钮图标
  icon: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['click'])

// 按钮点击事件
const handleClick = (e) => {
  if (props.disabled || props.loading) return
  emit('click', e)
}
</script>

<style scoped>
</style> 